<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div>
            没有节流的input <input type="text" id = "inputa" />
        </div>
        <div>
            节流后的input <input type="text" id = "inputc" />
        </div>
        <script>
            const inputa = document.getElementById("inputa");
            const inputc = document.getElementById("inputc");

            // 耗时耗性能的任务 => promise 包一下
            const ajax = (content) =>{
                console.log(`ajax request ${content}`);
            }
            
            // 节流功能
            // 定义的时刻

            const throttled = ( func , delay ) =>{
                // func,delay 
                // 这才是事件的处理函数
                // 定义时，生成时 func，delay
                // keyup return func 调用时能找到闭包中的自由变量
                let last,deferTimer //自由变量 
                // last 上一次是啥时候执行的
                // deferTimer 定时器id

                return (args) =>{
                    // 当前时间
                    let now = +new Date() // +号：隐式类型转换
                    if( last && now < last +delay ){
                        // 触发干掉 
                        clearTimeout( deferTimer)
                        deferTimer = setTimeout(()=>{
                            last = now 
                            func(args)
                        },delay)
                    }else{
                        //再次来到这个地方
                        last = now  // 第一次时间
                        func(args) // 先执行一次
                    }
                }
            }

            inputa.addEventListener('keyup',(e)=>{
                ajax(e.target.value)
            })
            //生成的时候
            let throttledFunc = throttled(ajax,1000)    //多少时间执行一次 
            //这个代码最好放在下面代码块的外面要不然每次都会执行，性能消耗更大

            inputc.addEventListener('keyup',(e)=>{
                let value = e.target.value;
                 // googleSuggest 体验
                // qps 服务器并发量

                throttledFunc(value)
            })

        </script>
    </div>
</body>
</html>